<template>
  <y-dialog
    :title="title"
    v-bind="dialogOptions"
    ref="dialogRef"
    @ok="$refs.formRef.submit()"
  >
    <y-form
      ref="formRef"
      :options="formOptions"
      @submit="submit"
      class="p-4"
    ></y-form>
  </y-dialog>
</template>

<script>
import { cloneDeep } from '@/utils'
import request from '@/utils/request'
import { getTableData } from '@/api/table'

const popupListOptions = {
  // 获取数据方法
  dataMethod: getTableData,
  formOptions: {
    items: [
      {
        field: 'keywords',
        title: '用户ID',
        itemRender: {
          name: 'VxeInput'
        }
      }
    ]
  },
  // 表格配置
  tableOptions: {
    // 表格列
    columns: [
      { field: 'userName', title: '用户名' },
      { field: 'userId', title: '用户ID' },
      { field: 'mobilePhone', title: '手机号' }
    ]
  }
}

export default {
  data() {
    return {
      // 唯一键值
      keyId: 'ksh',
      // 接口
      link: {
        edit: '/edit',
        add: '/add'
      },
      // 弹窗配置
      dialogOptions: {
        loading: false
      },
      // 表单配置
      formOptions: {
        items: [
          {
            title: 'Popup',
            itemRender: {
              name: 'YPopup',
              props: {
                // 多选
                multiple: true,
                displayField: 'userName',
                valueField: 'userId',
                bounds: {
                  myUserName: 'userName',
                  myUserId: 'userId'
                },
                listOptions: popupListOptions
              }
            }
          },
          {
            field: 'userName',
            title: '用户名称',
            required: true,
            itemRender: {
              name: 'VxeInput'
            }
          },
          {
            field: 'userType',
            title: '用户类别',
            required: true,
            itemRender: {
              name: 'ZSelect',
              props: {
                dictCode: 'frame_user_type'
              }
            }
          },
          {
            field: 'keywords',
            title: '姓名、工号',
            itemRender: {
              name: 'VxeInput',
              props: {
                maxLength: 20,
                showWordCount: true
              }
            }
          },
          {
            field: 'switch',
            title: '开关',
            span: 24,
            itemRender: { name: 'VxeSwitch' }
          },
          {
            align: 'center',
            span: 24,
            itemRender: {
              name: 'VxeButtonGroup',
              options: [
                { name: 'back', content: '返回' },
                { name: 'cancel', content: '取消', status: 'primary' },
                {
                  name: 'reset',
                  content: '查询',
                  status: 'danger',
                  icon: 'vxe-icon-save'
                }
              ],
              events: {
                click(slotParams, { name }) {
                  console.log(name, slotParams)
                }
              }
            }
          },
          {
            field: 'upload',
            title: '上传',
            itemRender: {
              name: 'ZUpload',
              props: {
                module: 'Web'
              },
              events: {
                success: (e) => {
                  console.log(e)
                }
              }
            }
          },
          {
            field: 'flag1',
            title: '文本域',
            span: 24,
            itemRender: { name: 'VxeTextarea' }
          },
          {
            field: 'edit',
            title: '富文本',
            itemRender: {
              name: 'YEditor'
            }
          }
        ]
      },
      // 表单数据 - 只用于初始化 后期数据改变不会更新
      formData: {}
    }
  },
  computed: {
    title() {
      const titleMap = {
        edit: '修改',
        add: '新增'
      }
      return this.formData[this.keyId] ? titleMap.edit : titleMap.add
    }
  },
  methods: {
    // 打开弹窗
    open(formData = {}, type = '') {
      const isDetail = type === 'detail'

      this.formOptions = Object.assign(this.formOptions, {
        readonly: isDetail,
        border: isDetail,
        titleBackground: isDetail
      })

      this.$refs.dialogRef.open()

      this.formData = cloneDeep(formData)
      // 设置数据
      this.$nextTick(() => {
        // 请求接口
        this.$refs.formRef.setData(formData)
      })
    },
    // 点击确认提交
    async submit(data) {
      try {
        if (data[this.keyId]) {
          await this.edit(data)
        } else {
          await this.add(data)
        }
        if (this.$parent.$refs.gridRef) {
          this.$parent.$refs.gridRef.loadData()
        }
        this.$message.success('提交成功')
        this.dialogOptions.loading = false
        this.close()
      } catch (error) {
        this.dialogOptions.loading = false
      }
    },
    // 编辑提交
    edit(data) {
      return request({
        url: this.link.edit,
        method: 'post',
        data
      })
    },
    // 新增提交
    add(data) {
      return request({
        url: this.link.add,
        method: 'post',
        data
      })
    },
    // 关闭弹窗
    close() {
      this.$refs.dialogRef.close()
    }
  }
}
</script>

<style lang="scss" scoped></style>
